<template>
  <div class="popup" @touchmove="touchMove($event)">
    <div class="popup-center">
      <p class="popup-text">长按识别二维码关注公众号</p>
      <div class="qc-code">
        <img src="../assets/img/qc-code.jpg" class="qc-code-image">
      </div>
      <p class="popup-text">关注接收重要通知</p>
      <div class="shut-down" @click="shutDown">
        <img src="../assets/img/shut-down.png" class="shut-down-image">
      </div>
    </div>
  </div>
</template>

<script>
import $fly from 'flyio'
import api from '../assets/js/api.js'
export default {
  name: 'Popup',
  data () {
    return {
      // popupShow: false,
      word_count: ''
    }
  },
  // props: {
  //   show: {
  //     type: Boolean,
  //     default: false
  //   }
  // },
  // mounted () {
  //   this.popupShow = this.show
  // },
  // watch: {
  //   show () {
  //     this.popupShow = this.show
  //   }
  // },
  methods: {
    async shutDown () {
      await api.authRequest({
        url: "users/followed",
        method: "post",
        })
      .then( (res) => {
        this.word_count = res.data.word_count
      })
      .catch( (err) => {
        console.log(err)
      })
      this.$emit('shutDown', this.word_count)
    },
    touchMove (e) {
      e.preventDefault()
      e.stopPropagation()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .popup
    position fixed
    top 0
    left 0
    z-index 999
    width 100%
    height 100%
    background-color rgba(0, 0, 0, 0.8)
    display flex
    justify-content center
    align-items center
    .popup-center
      .popup-text
        color #fff
        font-size 28px
        text-align center
        margin-bottom 30px
        line-height 40px
      .qc-code
        width 344px
        height 344px
        margin 0 auto 30px
        .qc-code-image
          width 100%
          height auto
      .shut-down
        width 64px
        height 64px
        margin 100px auto 0
        color #fff
        .shut-down-image
          width 100%
          height auto
</style>
